<template>
  <div class="pagination">
    <div class="pagination__total">
      共 {{ total }} 条记录 第 {{ currentPage }} /
      {{ total ? Math.ceil(total / pageSize) : 0 }} 页
    </div>
    <el-pagination
      background
      :currentPage="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, sizes, jumper"
      :total="total"
      :page-sizes="autoPageSizes"
      @update:current-page="(...rest) => emits('update:current-page', ...rest)"
      @update:page-size="(...rest) => emits('update:page-size', ...rest)"
    >
    </el-pagination>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'

const emits = defineEmits(['update:current-page', 'update:page-size'])

const props = withDefaults(
  defineProps<{
    total?: number
    pageSize?: number
    currentPage?: number
    pageSizes?: number[]
  }>(),
  {
    total: 0,
    pageSize: 10,
    currentPage: 0
  }
)

const autoPageSizes = computed(() => {
  return (
    props.pageSizes ||
    Array(3)
      .fill(0)
      .map((_, index) => (index + 1) * props.pageSize)
  )
})
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  &__total {
    color: #0000006d;
  }
}
</style>
